//员工绩效计划
import { Form, Input, Button, message, Space, Table, Select,Modal,Pagination } from 'antd';
import { ReloadOutlined, SearchOutlined,PlusOutlined,ExclamationCircleFilled } from "@ant-design/icons";
import { useState,useEffect } from 'react';
import { http } from "@/utils/request";
import dayjs from 'dayjs';
import Router from "next/router"
type TableDataType = {
  id:number,
  planCode: string;
  planName: string;
  evaluObject: string;
  evaluFrequency: string;
  fractionMax: string;
  evaluYear: string;
  planBeginTime: string;
  createdBy: string;
  createdTime: string;
  updatedBy: string;
  updatedTime: string;
}
const { confirm } = Modal;
const staffPerformancePlan
 = () =>{
  const [form] = Form.useForm();
  const [data,setData] = useState([]);
  const [pageNum,setPageNum] = useState(1);
  const [pageSize,setPageSize] = useState(10);
  const [total,setTotal] = useState();
  
  const columns: TableColumnsType<TableDataType> = [
    {
      title: "序号",
      key: "index",
			align:'center',
      width:80,
      render: (_text, _record, index) => {
        return index + 1
      }
    },
    {
      title: "计划编码",
      dataIndex: "planCode",
			align:'center',
      width:150,
    },
    {
      title: "计划名称",
      dataIndex: "planName",
			align:'center',
      width:150,
    },
    {
      title: "被考核人",
      dataIndex: "evaluObject",
			align:'center',
      width:150,
    },
    {
      title: "计划频次",
      dataIndex: "evaluFrequency",
			align:'center',
      width:150,
      render: (_, record) => {
        return (
          <>
            {record.evaluFrequency === "10" && <span>年度</span>}
            {record.evaluFrequency === "20" && <span>季度</span>}
            {record.evaluFrequency === "30" && <span>月度</span>}
          </>
        )
      }
    },
    {
      title: "总分上限",
      dataIndex: "fractionMax",
			align:'center',
      width:150,
    },
    {
      title: "计划考核年度",
      dataIndex: "evaluYear",
			align:'center',
      width:150,
    },
    {
      title: "计划期间",
			align:'center',
      width:150,
      render: (_, record) => {
        return (
          <>
            <span>{record.planBeginTime}至{record.planEndTime}</span>
          </>
        )
      }
    },
    {
      title: "创建人",
      dataIndex: "createdBy",
			align:'center',
      width:150,
    },
    {
      title: "创建时间",
			align:'center',
      width:150,
      render: (_, record) => {
        return (
          <>
            <span>{dayjs(record.createdTime).format('YYYY-MM-DD')}</span>
          </>
        )
      }
    },
    {
      title: "更新人",
      dataIndex: "updatedBy",
			align:'center',
      width:150,
    },
    {
      title: "更新时间",
			align:'center',
      width:150,
      render: (_, record) => {
        return (
          <>
            <span>{dayjs(record.updatedTime).format('YYYY-MM-DD')}</span>
          </>
        )
      }
    },
    {
      title: "操作",
			width:250,
			align:'center',
      fixed: 'right',
      render: (_, record) => {
        return (
          <>
            <Button type={'link'} onClick={() => {
              Router.push({pathname:'/performancePlan/staff/detailStaffPlan',query:{
                id:record.id,
                title:'员工绩效计划详情'
              }})
            }}>详情</Button>
            <Button type={'link'} onClick={async()=>{
              Router.push({pathname:'/performancePlan/staff/addOrEditStaffPlan',query:{
                id:record.id,
                title:'编辑员工绩效计划'
              }})
            }}>编辑</Button>
            <Button type={'link'} danger onClick={()=>{
              confirm({
                title: '提示?',
                icon: <ExclamationCircleFilled />,
                content: '此操作将永久删除该数据，是否继续?',
                cancelText:'取消',
                okText:'确定',
                onOk() {
                  delData(record.id)
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            }}>删除</Button>
          </>
        )
      }
    }
  ];
  //删除
  const delData = async(id:number) =>{
    try {
      const res = await http.get({
        url:'/pmEvaluPlan/remove',
        params:{
          planId:id,
        }
      })
      if(res.code==200){
        message.success('删除成功!');
        getList();
      }else{
        message.error(res.msg);
      }
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  const addData = () => {
    Router.push({pathname:'/performancePlan/staff/addOrEditStaffPlan',query:{
      id:null,
      title:'新增员工绩效计划'
    }})
  };
  const onSearchHandler = () => {
    getList();
  };
  const onResetHandler = () => {
    form.resetFields();
    getList();
  };
  //修改页码或分页大小
  const changePagination = async (page: number, size: number)=>{
    setPageNum(page);
    if(size!==pageSize){
      setPageNum(1);
    }
    setPageSize(size);
  }
  //查询接口
  const getList = async() =>{
    try {
      const res = await http.get({
        url:'/pmEvaluPlan/qryList',
        params:{
          planName:form.getFieldValue().planName,
          evaluObject:form.getFieldValue().evaluObject,
          pageNum:pageNum,
          pageSize:pageSize,
          evaluType:'20',
        }
      })
      setData(res.rows);
      setTotal(res.total);
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  useEffect(()=>{
    getList();
  },[pageNum,pageSize])
  return(
    <div>
      <div className={'title'}>员工绩效计划</div>
      <Form
        form={form}
        layout={'inline'}
        autoComplete="off"
      >
        <Form.Item name="planName" label={'计划名称'} >
          <Input placeholder="请输入计划名称" />
        </Form.Item>
        <Form.Item className={'search-form-button !flex-1 text-right'}>
          <Space>
            <Button type="primary" icon={<SearchOutlined />} onClick={onSearchHandler}>
              查询
            </Button>
            <Button icon={<ReloadOutlined />} onClick={onResetHandler}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
      <Space>
        <Button type="primary" icon={<PlusOutlined />} onClick={addData}>
          新增
        </Button>
      </Space>
      <Table
        scroll={{ x: 1300 }}
        style={{marginTop:'20px'}}
        dataSource={data}
        bordered
        pagination={false}
        columns={columns}
        rowKey={(record) => `${record.id}`}
      ></Table>
      <Pagination
        className={'m-[20px] text-end'}
        current={pageNum}
        pageSize={pageSize}
        total={total}
        align="end"
        showSizeChanger
        showQuickJumper
        showTotal={(total) => `共 ${total} 条`}
        onChange={changePagination}
      />
    </div>
  )
}
export default staffPerformancePlan
